<template>
  <div class="w-full" v-if="show">
    <div class="border border-zinc-200">
      <div class="pl-2 text-[#8d8d8d]">
        <span class="cursor-pointer">管理系统 ></span>
        <span class="cursor-pointer">用户管理</span>
      </div>
    </div>
    <div class="m-8 flex flex-col">
      <div class="bg-[#f0f0f0] flex justify-between">
        <div class="flex p-2">
          <button class="p-1 px-4 bg-blue-500 text-white" @click="add">
            +添加
          </button>
          <div class="flex ml-4">
            <input
              type="text"
              placeholder="请输入用户名"
              class="border border-zinc-400 outline-none px-2"
              v-model="keywords"
              @keydown.enter="search"
            />
            <div class="bg-[#fdc14b] cursor-pointer p-1 px-4" @click="search">
              <img
                src="https://i.postimg.cc/zf1tdxTz/image.png"
                alt=""
                class="w-6"
              />
            </div>
          </div>
          <div
            class="flex justify-center items-center ml-5 bg-[#bbbbbb] text-white rounded-lg"
            v-if="ifshow"
          >
            <button class="py-1 px-3" @click="refreshPage">返回</button>
          </div>
        </div>

        <div class="flex items-center pr-4">
          <p>
            共有用户：<span>{{ usernum }}</span
            >人
          </p>
        </div>
      </div>
      <div class="mt-8">
        <table class="table-flex">
          <tr class="bg-[#f0f0f0]">
            <th class="sm:w-[5%] xl:w-[1%] border border-zinc-300">id</th>
            <th class="sm:w-[6%] xl:w-[4%] border border-zinc-300">用户名</th>
            <th class="sm:w-[10%] xl:w-[4%] border border-zinc-300">
              用户密码
            </th>
            <th class="w-[10%] xl:w-[4%] border border-zinc-300">手机号</th>
            <th class="w-[15%] xl:w-[8%] border border-zinc-300">用户介绍</th>
            <th class="sm:w-[10%] xl:w-[10%] border border-zinc-300">
              下单地址
            </th>
            <th class="xl:w-[3%] border border-zinc-300">操作</th>
          </tr>
          <tr
            v-for="item in user"
            :key="item.id"
            class="border border-zinc-300"
          >
            <td class="text-center border border-zinc-300">
              {{ item.userId }}
            </td>
            <td class="text-center border border-zinc-300">{{ item.name }}</td>
            <td class="text-center border border-zinc-300">
              {{ item.pwd }}
            </td>
            <td class="text-center border border-zinc-300">{{ item.phone }}</td>
            <td class="text-center border border-zinc-300">
              {{ item.description }}
            </td>
            <td class="text-center border border-zinc-300">
              {{ item.address }}
            </td>
            <td>
              <div class="flex items-center justify-center">
                <img
                  src="https://i.postimg.cc/gJy8ypHH/1.png"
                  alt=""
                  class="sm:w-5 xl:w-8"
                  @click="change(item)"
                />
                <img
                  src="https://i.postimg.cc/9062c6ss/image.png"
                  alt=""
                  class="sm:w-5 xl:w-8 xl:ml-3 cursor-pointer"
                  @click="deleteuser(item)"
                />
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="m-auto" v-if="!ifshow">
        <el-pagination
          :page-size="10"
          :pager-count="6"
          layout="prev, pager, next"
          :total="50"
          @current-change="getPageNum"
        />
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="确认修改" width="30%" draggable>
    <form action="" class="flex flex-col w-full">
      <label for="name" class="m-auto w-4/5">
        用户：
        <input
          id="name"
          type="text"
          :placeholder="olduser.name"
          v-model="newuser.name"
          class="border border-zinc-300 xl:w-2/3 outline-none"
      /></label>
      <label for="pwd" class="m-auto w-4/5">
        密码：
        <input
          id="pwd"
          type="text"
          class="border border-zinc-300 xl:w-2/3 outline-none"
          :placeholder="olduser.pwd"
          v-model="newuser.pwd"
        />
      </label>
      <label for="js" class="m-auto w-4/5">
        简介：
        <input
          id="js"
          type="text"
          :placeholder="olduser.description"
          v-model="newuser.description"
          class="border border-zinc-300 xl:w-2/3 outline-none"
      /></label>
      <label for="phone" class="m-auto w-4/5">
        手机：
        <input
          id="phone"
          type="text"
          :placeholder="olduser.phone"
          v-model="newuser.phone"
          class="border border-zinc-300 xl:w-2/3 outline-none"
      /></label>

      <label for="address" class="m-auto w-4/5">
        地址：
        <input
          id="address"
          type="text"
          :placeholder="olduser.address"
          v-model="newuser.address"
          class="border border-zinc-300 xl:w-2/3 outline-none"
      /></label>
    </form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(index)"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
  <div v-if="addshow" class="h-[90%] bg-[#f1f1f1a6]">
    <div class="border border-zinc-200">
      <div class="pl-2 text-[#8d8d8d]">
        <span class="cursor-pointer">管理系统 ></span>
        <span class="cursor-pointer" @click="isshow">用户管理 ></span>
        <span class="cursor-pointer">用户添加</span>
      </div>
    </div>
    <div class="flex justify-center items-center h-full">
      <div class="flex flex-col items-center w-1/2 bg-white">
        <div class="flex justify-center items-center">
          <span class="xl:text-[40px] sm:text-[20px] m-8"> 增加用户 </span>
        </div>
        <div class="sm:w-2/3 xl:w-1/2">
          <div class="w-full flex flex-row mb-4">
            <img
              src="https://i.postimg.cc/bryxmVSr/image.png"
              alt=""
              class="sm:w-[15%] xl:w-[10%]"
            />
            <input
              class="ml-4 w-full p-2 outline-none border border-zinc-400"
              type="username"
              placeholder="请输入用户名"
              v-model="person.perdonname"
            />
          </div>
          <div class="w-full flex flex-row mb-4">
            <img
              src="https://i.postimg.cc/DZKdXw2q/image.png"
              alt=""
              class="sm:w-[15%] xl:w-[10%]"
            />
            <input
              class="ml-4 w-full p-2 outline-none border border-zinc-400"
              type="psw"
              placeholder="请输入密码"
              v-model="person.perpassword"
            />
          </div>
          <div class="w-full flex flex-row mb-4">
            <img
              src="https://i.postimg.cc/zBSwSYB4/image.png"
              alt=""
              class="sm:w-[15%] xl:w-[10%]"
            />
            <input
              class="ml-4 w-full p-2 outline-none border border-zinc-400"
              type="psw"
              placeholder="请输入手机号"
              v-model="person.personphone"
            />
          </div>
          <div class="w-full flex flex-row mb-4">
            <img
              src="https://i.postimg.cc/MH9yN01D/image.png"
              alt=""
              class="sm:w-[15%] xl:w-[10%]"
            />
            <input
              class="ml-4 w-full p-2 outline-none border border-zinc-400"
              type="psw"
              placeholder="请输入地址"
              v-model="person.personaddress"
            />
          </div>
          <div class="w-full flex flex-row mb-4">
            <img
              src="https://i.postimg.cc/BQkH3QgN/image.png"
              alt=""
              class="sm:w-[15%] xl:w-[10%]"
            />
            <input
              class="ml-4 w-full p-2 outline-none border border-zinc-400"
              type="psw"
              placeholder="请输入用户介绍"
              v-model="person.description"
            />
          </div>
        </div>
        <div class="flex m-4 justify-around w-full">
          <button
            class="flex items-center xl:text-[20px] sm:text-[16.5px] bg-[#FDC14B] rounded-lg text-white p-1"
            @click="isshow"
          >
            取消添加
          </button>
          <button
            class="flex items-center xl:text-[20px] sm:text-[16.5px] bg-[#FDC14B] rounded-lg text-white p-1"
            @click="postData"
          >
            确认添加
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, computed, ref, onMounted } from "vue";
import axios from "axios";
let user = ref([]);
let dialogVisible = ref(false);
let person = reactive({
  perdonname: "",
  perpassword: "",
  personphone: "",
  description: "",
  personaddress: "",
});
let usernum = computed(() => {
  return user.value.length;
});
// 删除用户
function deleteuser(item) {
  axios
    .delete(
      `http://1.14.126.98:8081/admin/deleteuser?userId=${item.userId}`,
      {}
    )
    .then((res) => {
      alert(res.data);
      axios
        .get("http://1.14.126.98:8081/admin/all", {
          params: {
            current: pagenum.value,
            size: 10,
            isAsc: true,
          },
        })
        .then((res) => {
          user.value = res.data.records;
        })
        .catch((error) => {
          console.log(error);
        });
    })
    .catch((error) => {
      console.log(error);
    });
}
function add() {
  return (addshow.value = true), (show.value = false);
}
let show = ref(true);
let addshow = ref(false);
function isshow() {
  return (show.value = true), (addshow.value = false);
}
//添加新用户
function postData() {
  axios
    .post(
      `http://1.14.126.98:8081/admin/register?phone=${person.personphone}&name=${person.perdonname}&pwd=${person.perpassword}&address=${person.personaddress}&description=${person.description}`,
      {}
    )
    .then((response) => {
      console.log(response.data);
      person.personphone = "";
      person.perdonname = "";
      person.perpassword = "";
      person.personaddress = "";
      person.description = "";
      isshow();
    })
    .catch((error) => {
      console.log(error);
    });
}
//修改用户信息
let olduser = ref({});
let newuser = ref({
  pwd: "",
  description: "",
  phone: "",
  name: "",
  address: "",
});
function change(item) {
  dialogVisible.value = true;
  olduser.value = item;
}
function submit() {
  dialogVisible.value = false;
  console.log(newuser.value.pwd);
  axios
    .put(
      `http://1.14.126.98:8081/admin/pwd?userId=${olduser.value.userId}&pwd=${newuser.value.pwd}&description=${newuser.value.description}&phone=${newuser.value.phone}&name=${newuser.value.name}&address=${newuser.value.address}`
    )
    .then((res) => {
      alert(res.data);
      axios
        .get("http://1.14.126.98:8081/admin/all", {
          params: {
            current: pagenum.value,
            size: 10,
            isAsc: true,
          },
        })
        .then((res) => {
          user.value = res.data.records;
        })
        .catch((error) => {
          console.log(error);
        });
      newuser.value.pwd = "";
      newuser.value.description = "";
      newuser.value.phone = "";
      newuser.value.name = "";
      newuser.value.address = "";
    })
    .catch((err) => {
      console.log(err);
    });
}
//模糊查询用户
let keywords = ref("");
let ifshow = ref(false);
function search() {
  axios
    .get("http://1.14.126.98:8081/admin/search", {
      params: { keyword: keywords.value },
    })
    .then((res) => {
      user.value = res.data;
      keywords.value = "";
      ifshow.value = true;
    })
    .catch((error) => {
      console.log(error);
    });
}

//获取用户数据
onMounted(() => {
  axios
    .get("http://1.14.126.98:8081/admin/all", {
      params: {
        current: pagenum.value,
        size: 10,
        isAsc: true,
      },
    })
    .then((res) => {
      user.value = res.data.records;
    })
    .catch((error) => {
      console.log(error);
    });
});
//点击刷新页面
function refreshPage() {
  ifshow.value = false;
  axios
    .get("http://1.14.126.98:8081/admin/all", {
      params: {
        current: pagenum.value,
        size: 10,
        isAsc: true,
      },
    })
    .then((res) => {
      user.value = res.data.records;
    })
    .catch((error) => {
      console.log(error);
    });
}
//分页查询所有用户
let pagenum = ref(1);
function getPageNum(val) {
  pagenum.value = val;
  axios
    .get("http://1.14.126.98:8081/admin/all", {
      params: {
        current: pagenum.value,
        size: 10,
        isAsc: true,
      },
    })
    .then((res) => {
      user.value = res.data.records;
    })
    .catch((error) => {
      console.log(error);
    });
}
</script>
